<template lang="pug">
div.progress-wrapper(:class="wrapperClasses")
  slot
    ProgressView(v-for="(item, index) in finalProgressData" :key="index"
      :label="item.label" :rate="item.rate" :color="item.color || watchPointColor(item)")
</template>

<script>
export default {
  name: "ProgressWrapper",
  props: {
    progressData: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  computed: {
    finalProgressData() {
      const array = [];
      this.progressData.forEach(item => {
        array.push({
          ...item,
          rate: (Number(item.rate)).toFixed(2),
        })
      });
      return array;
    },
    wrapperClasses() {
      return [`bar-length-${this.progressData.length}`]
    },
    watchPointColor() {
      return item => {
        let color = '';
        if (item.rate > 100) {
          color = '#F07B5F';
        } else if(item.rate > 30) {
          color = '#05FDBB';
        } else {
          color = '#FFFFFF';
        }
        return color;
      }
    }
  },
}
</script>

<style lang="scss" scoped>
@for $i from 1 through 10 {
  $max_height: $i * 40;
  .bar-length-#{$i} {
    max-height: rem($max_height);
  }
}
.progress-wrapper{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  //max-height: rem(var(--length) * 40);
}
</style>
